import React from 'react';
import { Select, Input } from 'antd';

const Option = Select.Option;

const style = {
  container: {
    display: 'inline-block',
    marginRight: 10,
    marginBottom: 10,
  },
};

/**
 * 创造一个下拉框
 * @param {} param
 *    - title {String}
 *    - placeholder {String}
 *    - onChange {String}
 *    - options {Object}
 */
const genOption = (
  {
    title,
    placeholder,
    onChange,
    options,
    value,
    key,
    disabled = false,
  },
) => {
  return (
    <div style={style.container}>
      <label>{title} : </label>
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder={placeholder}
        optionFilterProp="children"
        onChange={onChange}
        value={value}
        key={key}
        disabled={disabled}
        filterOption={
            (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
      >
        {
                options.map((item) => {
                  return (
                    <Option value={item.value}>{item.title}</Option>
                  );
                })
              }
      </Select>
    </div>
  );
};

/**
 * 创造一个输入框
 * @param {*} param0
 */
const genInput = ({
  title,
  placeholder,
  onChange,
  value,
}) => {
  return (
    <div style={style.container}>
      <label>{title} : </label>
      <Input
        style={{ width: 200 }}
        placeholder={placeholder}
        onChange={onChange}
        value={value}
        maxLength={20}
      />
    </div>
  );
};

export default {
  option: genOption,
  input: genInput,
};
